<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Bootstrap - 简洁、直观、强悍、移动设备优先的前端开发框架，让web开发更迅速、简单。">
<meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, web development">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="author" content="王赛 翻译整理">

<title>
  
    Typography &middot; Bootstrap
  
</title>

<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" tppabs="http://v4.bootcss.com/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Documentation extras -->
<link href="../../assets/css/docs.min.css" tppabs="http://v4.bootcss.com/assets/css/docs.min.css" rel="stylesheet">

<!-- Google Web fonts -->
<link href="../../../fonts.useso.com/css-family=Roboto-300,400,400italic,500.css" tppabs="http://fonts.useso.com/css?family=Roboto:300,400,400italic,500" rel="stylesheet">
<link href="../../../fonts.useso.com/css-family=Source+Sans+Pro-400,300,400italic,600.css" tppabs="http://fonts.useso.com/css?family=Source+Sans+Pro:400,300,400italic,600" rel='stylesheet' type='text/css'>

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js" tppabs="http://v4.bootcss.com/assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="../../assets/js/ie-emulation-modes-warning.js" tppabs="http://v4.bootcss.com/assets/js/ie-emulation-modes-warning.js"></script>

<!-- Favicons -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png">
<link rel="icon" href="/favicon.ico">

    <script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "../../../hm.baidu.com/hm.js-fc4ecdb3b7e797fdd7347e29dbec6802.js"/*tpa=http://hm.baidu.com/hm.js?fc4ecdb3b7e797fdd7347e29dbec6802*/;
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
  </head>
  <body class="bd-docs" data-spy="scroll" data-target=".bd-sidenav-active">
    <a id="skippy" class="sr-only sr-only-focusable" href="#content">
      <div class="container">
        <span class="skiplink-text">Skip to main content</span>
      </div>
    </a>

    <header class="navbar navbar-light navbar-static-top bd-navbar" role="banner">
  

  <div class="clearfix">
    <button class="navbar-toggler pull-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav">
      &#9776;
    </button>
    <a class="navbar-brand hidden-sm-up" href="../../index.htm" tppabs="http://v4.bootcss.com/">
      Bootstrap
    </a>
  </div>
  <div class="collapse navbar-toggleable-xs" id="bd-main-nav">
    <nav class="nav navbar-nav">
      <a class="nav-item nav-link " href="../../index.htm" tppabs="http://v4.bootcss.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Bootstrap</a>
      <a class="nav-item nav-link active" href="../../getting-started/introduction/index.htm" tppabs="http://v4.bootcss.com/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">文档</a>
      <a class="nav-item nav-link " href="../../examples/index.htm" tppabs="http://v4.bootcss.com/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">实例</a>
      <a class="nav-item nav-link" href="javascript:if(confirm(%27http://themes.getbootstrap.com/  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://themes.getbootstrap.com/%27" tppabs="http://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');">主题</a>
      <a class="nav-item nav-link" href="javascript:if(confirm(%27http://expo.bootcss.com/  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://expo.bootcss.com/%27" tppabs="http://expo.bootcss.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">优站精选</a>
      <a class="nav-item nav-link" href="javascript:if(confirm(%27http://blog.getbootstrap.com/  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://blog.getbootstrap.com/%27" tppabs="http://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">博客</a>
    </nav>
  </div>
</header>


    <div class="bd-pageheader">
      <div class="container">
        
  <h1>Content</h1>
  <p class="lead">
    Styles for displaying content with some of the most commonly used HTML elements, including normalization, typography, images, tables, and more.
  </p>


      </div>
    </div>

    <div class="container">
      <div class="row">
        <div class="col-md-3 col-md-push-9 bd-sidebar">
          <div class="bd-sidebar">

  <form class="bd-search hidden-sm-down">
    <input type="text" class="form-control" id="search-input" placeholder="Search...">
    <div class="dropdown-menu bd-search-results" id="search-results"></div>
  </form>

  <nav class="bd-links" id="docsNavbarContent">
    
      
      
      

      

      <div class="bd-toc-item ">
        
          <a class="bd-toc-link" href="../../getting-started/introduction/index.htm" tppabs="http://v4.bootcss.com/getting-started/introduction">
        
          Getting started
        </a>

        <ul class="nav bd-sidenav">
          
            
            

            

            <li class="">
              <a href="../../getting-started/introduction/index.htm" tppabs="http://v4.bootcss.com/getting-started/introduction">
                Introduction
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../getting-started/download/index.htm" tppabs="http://v4.bootcss.com/getting-started/download">
                Download
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../getting-started/browsers-devices/index.htm" tppabs="http://v4.bootcss.com/getting-started/browsers-devices">
                Browsers & devices
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../getting-started/options/index.htm" tppabs="http://v4.bootcss.com/getting-started/options">
                Options
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../getting-started/flexbox/index.htm" tppabs="http://v4.bootcss.com/getting-started/flexbox">
                Flexbox
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../getting-started/build-tools/index.htm" tppabs="http://v4.bootcss.com/getting-started/build-tools">
                Build tools
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../getting-started/best-practices/index.htm" tppabs="http://v4.bootcss.com/getting-started/best-practices">
                Best practices
              </a>

              
            </li>
          
        </ul>
      </div>
    
      
      
      

      

      <div class="bd-toc-item ">
        
          <a class="bd-toc-link" href="../../layout/overview/index.htm" tppabs="http://v4.bootcss.com/layout/overview">
        
          Layout
        </a>

        <ul class="nav bd-sidenav">
          
            
            

            

            <li class="">
              <a href="../../layout/overview/index.htm" tppabs="http://v4.bootcss.com/layout/overview">
                Overview
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../layout/grid/index.htm" tppabs="http://v4.bootcss.com/layout/grid">
                Grid
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../layout/media-object/index.htm" tppabs="http://v4.bootcss.com/layout/media-object">
                Media object
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../layout/responsive-utilities/index.htm" tppabs="http://v4.bootcss.com/layout/responsive-utilities">
                Responsive utilities
              </a>

              
            </li>
          
        </ul>
      </div>
    
      
      
      

      
        
      

      <div class="bd-toc-item active">
        
          <a class="bd-toc-link" href="../reboot/index.htm" tppabs="http://v4.bootcss.com/content/reboot">
        
          Content
        </a>

        <ul class="nav bd-sidenav">
          
            
            

            

            <li class="">
              <a href="../reboot/index.htm" tppabs="http://v4.bootcss.com/content/reboot">
                Reboot
              </a>

              
            </li>
          
            
            

            
              
            

            <li class="active bd-sidenav-active">
              <a href="index.htm" tppabs="http://v4.bootcss.com/content/typography">
                Typography
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../code/index.htm" tppabs="http://v4.bootcss.com/content/code">
                Code
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../images/index.htm" tppabs="http://v4.bootcss.com/content/images">
                Images
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../tables/index.htm" tppabs="http://v4.bootcss.com/content/tables">
                Tables
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../figures/index.htm" tppabs="http://v4.bootcss.com/content/figures">
                Figures
              </a>

              
            </li>
          
        </ul>
      </div>
    
      
      
      

      

      <div class="bd-toc-item ">
        
          <a class="bd-toc-link" href="../../components/buttons/index.htm" tppabs="http://v4.bootcss.com/components/buttons">
        
          Components
        </a>

        <ul class="nav bd-sidenav">
          
            
            

            

            <li class="">
              <a href="../../components/buttons/index.htm" tppabs="http://v4.bootcss.com/components/buttons">
                Buttons
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/button-group/index.htm" tppabs="http://v4.bootcss.com/components/button-group">
                Button group
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/button-dropdown/index.htm" tppabs="http://v4.bootcss.com/components/button-dropdown">
                Button dropdown
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/forms/index.htm" tppabs="http://v4.bootcss.com/components/forms">
                Forms
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/input-group/index.htm" tppabs="http://v4.bootcss.com/components/input-group">
                Input group
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/dropdowns/index.htm" tppabs="http://v4.bootcss.com/components/dropdowns">
                Dropdowns
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/jumbotron/index.htm" tppabs="http://v4.bootcss.com/components/jumbotron">
                Jumbotron
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/label/index.htm" tppabs="http://v4.bootcss.com/components/label">
                Label
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/alerts/index.htm" tppabs="http://v4.bootcss.com/components/alerts">
                Alerts
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/card/index.htm" tppabs="http://v4.bootcss.com/components/card">
                Card
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/navs/index.htm" tppabs="http://v4.bootcss.com/components/navs">
                Navs
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/navbar/index.htm" tppabs="http://v4.bootcss.com/components/navbar">
                Navbar
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/breadcrumb/index.htm" tppabs="http://v4.bootcss.com/components/breadcrumb">
                Breadcrumb
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/pagination/index.htm" tppabs="http://v4.bootcss.com/components/pagination">
                Pagination
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/progress/index.htm" tppabs="http://v4.bootcss.com/components/progress">
                Progress
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/list-group/index.htm" tppabs="http://v4.bootcss.com/components/list-group">
                List group
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/modal/index.htm" tppabs="http://v4.bootcss.com/components/modal">
                Modal
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/scrollspy/index.htm" tppabs="http://v4.bootcss.com/components/scrollspy">
                Scrollspy
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/tooltips/index.htm" tppabs="http://v4.bootcss.com/components/tooltips">
                Tooltips
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/popovers/index.htm" tppabs="http://v4.bootcss.com/components/popovers">
                Popovers
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/collapse/index.htm" tppabs="http://v4.bootcss.com/components/collapse">
                Collapse
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/carousel/index.htm" tppabs="http://v4.bootcss.com/components/carousel">
                Carousel
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/utilities/index.htm" tppabs="http://v4.bootcss.com/components/utilities">
                Utilities
              </a>

              
            </li>
          
        </ul>
      </div>
    
      
      
      

      

      <div class="bd-toc-item ">
        
          <a class="bd-toc-link" href="../../about/history/index.htm" tppabs="http://v4.bootcss.com/about/history">
        
          About
        </a>

        <ul class="nav bd-sidenav">
          
            
            

            

            <li class="">
              <a href="../../about/history/index.htm" tppabs="http://v4.bootcss.com/about/history">
                History
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../about/team/index.htm" tppabs="http://v4.bootcss.com/about/team">
                Team
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../about/brand/index.htm" tppabs="http://v4.bootcss.com/about/brand">
                Brand
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../about/license/index.htm" tppabs="http://v4.bootcss.com/about/license">
                License
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../about/translations/index.htm" tppabs="http://v4.bootcss.com/about/translations">
                Translations
              </a>

              
            </li>
          
        </ul>
      </div>
    
      
      
      

      

      <div class="bd-toc-item ">
        
          <a class="bd-toc-link" href="../../migration/index.htm" tppabs="http://v4.bootcss.com/migration/">
        
          Migration
        </a>

        <ul class="nav bd-sidenav">
          
        </ul>
      </div>
    
  </nav>
</div>

        </div>
        <div class="col-md-9 col-md-pull-3 bd-content">
          <h1 class="bd-title">Typography</h1>
          <p>Bootstrap includes simple and easily customized typography for headings, body text, lists, and more. For even more control, check out the <a href="../../components/utilities/index.htm" tppabs="http://v4.bootcss.com/components/utilities/">textual utility classes</a>.</p>

<h2 id="contents">Contents</h2>

<ul id="markdown-toc">
  <li><a href="#contents" id="markdown-toc-contents">Contents</a></li>
  <li><a href="#global-settings" id="markdown-toc-global-settings">Global settings</a></li>
  <li><a href="#headings" id="markdown-toc-headings">Headings</a>    <ul>
      <li><a href="#customizing-headings" id="markdown-toc-customizing-headings">Customizing headings</a></li>
    </ul>
  </li>
  <li><a href="#display-headings" id="markdown-toc-display-headings">Display headings</a></li>
  <li><a href="#lead" id="markdown-toc-lead">Lead</a></li>
  <li><a href="#inline-text-elements" id="markdown-toc-inline-text-elements">Inline text elements</a></li>
  <li><a href="#abbreviations" id="markdown-toc-abbreviations">Abbreviations</a></li>
  <li><a href="#blockquotes" id="markdown-toc-blockquotes">Blockquotes</a>    <ul>
      <li><a href="#naming-a-source" id="markdown-toc-naming-a-source">Naming a source</a></li>
      <li><a href="#reverse-layout" id="markdown-toc-reverse-layout">Reverse layout</a></li>
    </ul>
  </li>
  <li><a href="#lists" id="markdown-toc-lists">Lists</a>    <ul>
      <li><a href="#unstyled" id="markdown-toc-unstyled">Unstyled</a></li>
      <li><a href="#inline" id="markdown-toc-inline">Inline</a></li>
      <li><a href="#horizontal-description" id="markdown-toc-horizontal-description">Horizontal description</a></li>
    </ul>
  </li>
  <li><a href="#responsive-typography" id="markdown-toc-responsive-typography">Responsive typography</a></li>
</ul>

<h2 id="global-settings">Global settings</h2>

<p>Bootstrap sets basic global display, typography, and link styles. Specifically, we:</p>

<ul>
  <li>Set <code>background-color: #fff;</code> on the <code>&lt;body&gt;</code></li>
  <li>Use the <code>$font-family-base</code>, <code>$font-size-base</code>, and <code>$line-height-base</code> attributes as our typographic base</li>
  <li>Set the global link color via <code>$link-color</code> and apply link underlines only on <code>:hover</code></li>
</ul>

<p>These styles can be found within <code>_reboot.scss</code>.</p>

<h2 id="headings">Headings</h2>

<p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code>, are available. <code>.h1</code> through <code>.h6</code> classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.</p>

<div class="bd-example bd-example-type">
  <table class="table">
    <tbody>
      <tr>
        <td><h1>h1. Bootstrap heading</h1></td>
        <td class="type-info">Semibold 36px</td>
      </tr>
      <tr>
        <td><h2>h2. Bootstrap heading</h2></td>
        <td class="type-info">Semibold 30px</td>
      </tr>
      <tr>
        <td><h3>h3. Bootstrap heading</h3></td>
        <td class="type-info">Semibold 24px</td>
      </tr>
      <tr>
        <td><h4>h4. Bootstrap heading</h4></td>
        <td class="type-info">Semibold 18px</td>
      </tr>
      <tr>
        <td><h5>h5. Bootstrap heading</h5></td>
        <td class="type-info">Semibold 14px</td>
      </tr>
      <tr>
        <td><h6>h6. Bootstrap heading</h6></td>
        <td class="type-info">Semibold 12px</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;h1&gt;</span>h1. Bootstrap heading<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;h2&gt;</span>h2. Bootstrap heading<span class="nt">&lt;/h2&gt;</span>
<span class="nt">&lt;h3&gt;</span>h3. Bootstrap heading<span class="nt">&lt;/h3&gt;</span>
<span class="nt">&lt;h4&gt;</span>h4. Bootstrap heading<span class="nt">&lt;/h4&gt;</span>
<span class="nt">&lt;h5&gt;</span>h5. Bootstrap heading<span class="nt">&lt;/h5&gt;</span>
<span class="nt">&lt;h6&gt;</span>h6. Bootstrap heading<span class="nt">&lt;/h6&gt;</span></code></pre></div>

<h3 id="customizing-headings">Customizing headings</h3>

<p>Use the included utility classes to recreate the small secondary heading text from Bootstrap 3.</p>

<div class="bd-example" data-example-id="">
<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;h3&gt;</span>
  Fancy display heading
  <span class="nt">&lt;small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>With faded secondary text<span class="nt">&lt;/small&gt;</span>
<span class="nt">&lt;/h3&gt;</span></code></pre></div>

<h2 id="display-headings">Display headings</h2>

<p>Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a <strong>display heading</strong>—a larger, slightly more opinionated heading style.</p>

<div class="bd-example bd-example-type">
  <table class="table">
    <tbody>
      <tr>
        <td><h1 class="display-4">Display 4</h1></td>
      </tr>
      <tr>
      <td><h1 class="display-3">Display 3</h1></td>
      </tr>
      <tr>
      <td><h1 class="display-2">Display 2</h1></td>
      </tr>
      <tr>
      <td><h1 class="display-1">Display 1</h1></td>
      </tr>
    </tbody>
  </table>
</div>

<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">"display-4"</span><span class="nt">&gt;</span>Display 4<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">"display-3"</span><span class="nt">&gt;</span>Display 3<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">"display-2"</span><span class="nt">&gt;</span>Display 2<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">"display-1"</span><span class="nt">&gt;</span>Display 1<span class="nt">&lt;/h1&gt;</span></code></pre></div>

<h2 id="lead">Lead</h2>

<p>Make a paragraph stand out by adding <code>.lead</code>.</p>

<div class="bd-example" data-example-id="">
<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"lead"</span><span class="nt">&gt;</span>
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<span class="nt">&lt;/p&gt;</span></code></pre></div>

<h2 id="inline-text-elements">Inline text elements</h2>

<p>Styling for common inline HTML5 elements.</p>

<div class="bd-example" data-example-id="">
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;p&gt;</span>You can use the mark tag to <span class="nt">&lt;mark&gt;</span>highlight<span class="nt">&lt;/mark&gt;</span> text.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;&lt;del&gt;</span>This line of text is meant to be treated as deleted text.<span class="nt">&lt;/del&gt;&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;&lt;s&gt;</span>This line of text is meant to be treated as no longer accurate.<span class="nt">&lt;/s&gt;&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;&lt;ins&gt;</span>This line of text is meant to be treated as an addition to the document.<span class="nt">&lt;/ins&gt;&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;&lt;u&gt;</span>This line of text will render as underlined<span class="nt">&lt;/u&gt;&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;&lt;small&gt;</span>This line of text is meant to be treated as fine print.<span class="nt">&lt;/small&gt;&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;&lt;strong&gt;</span>This line rendered as bold text.<span class="nt">&lt;/strong&gt;&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;&lt;em&gt;</span>This line rendered as italicized text.<span class="nt">&lt;/em&gt;&lt;/p&gt;</span></code></pre></div>

<p>While not shown above, feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p>

<h2 id="abbreviations">Abbreviations</h2>

<p>Stylized implementation of HTML’s <code>&lt;abbr&gt;</code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover and to users of assistive technologies.</p>

<p>Add <code>.initialism</code> to an abbreviation for a slightly smaller font-size.</p>

<div class="bd-example" data-example-id="">
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;p&gt;&lt;abbr</span> <span class="na">title=</span><span class="s">"attribute"</span><span class="nt">&gt;</span>attr<span class="nt">&lt;/abbr&gt;&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;&lt;abbr</span> <span class="na">title=</span><span class="s">"HyperText Markup Language"</span> <span class="na">class=</span><span class="s">"initialism"</span><span class="nt">&gt;</span>HTML<span class="nt">&lt;/abbr&gt;&lt;/p&gt;</span></code></pre></div>

<h2 id="blockquotes">Blockquotes</h2>

<p>For quoting blocks of content from another source within your document. Wrap <code>&lt;blockquote&gt;</code> around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes, we recommend a <code>&lt;p&gt;</code>.</p>

<div class="bd-example" data-example-id="">
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;blockquote&gt;</span>
  <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/blockquote&gt;</span></code></pre></div>

<h3 id="naming-a-source">Naming a source</h3>

<p>Add a <code>&lt;footer&gt;</code> for identifying the source. Wrap the name of the source work in <code>&lt;cite&gt;</code>.</p>

<div class="bd-example" data-example-id="">
<blockquote class="blockquote">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;blockquote</span> <span class="na">class=</span><span class="s">"blockquote"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;footer&gt;</span>Someone famous in <span class="nt">&lt;cite</span> <span class="na">title=</span><span class="s">"Source Title"</span><span class="nt">&gt;</span>Source Title<span class="nt">&lt;/cite&gt;&lt;/footer&gt;</span>
<span class="nt">&lt;/blockquote&gt;</span></code></pre></div>

<h3 id="reverse-layout">Reverse layout</h3>

<p>Add <code>.blockquote-reverse</code> for a blockquote with right-aligned content.</p>

<div class="bd-example" data-example-id="">
<blockquote class="blockquote blockquote-reverse">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;blockquote</span> <span class="na">class=</span><span class="s">"blockquote blockquote-reverse"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;footer&gt;</span>Someone famous in <span class="nt">&lt;cite</span> <span class="na">title=</span><span class="s">"Source Title"</span><span class="nt">&gt;</span>Source Title<span class="nt">&lt;/cite&gt;&lt;/footer&gt;</span>
<span class="nt">&lt;/blockquote&gt;</span></code></pre></div>

<h2 id="lists">Lists</h2>

<h3 id="unstyled">Unstyled</h3>

<p>Remove the default <code>list-style</code> and left margin on list items (immediate children only). <strong>This only applies to immediate children list items</strong>, meaning you will need to add the class for any nested lists as well.</p>

<div class="bd-example" data-example-id="">
<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"list-unstyled"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;li&gt;</span>Lorem ipsum dolor sit amet<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;</span>Consectetur adipiscing elit<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;</span>Integer molestie lorem at massa<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;</span>Facilisis in pretium nisl aliquet<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;</span>Nulla volutpat aliquam velit
    <span class="nt">&lt;ul&gt;</span>
      <span class="nt">&lt;li&gt;</span>Phasellus iaculis neque<span class="nt">&lt;/li&gt;</span>
      <span class="nt">&lt;li&gt;</span>Purus sodales ultricies<span class="nt">&lt;/li&gt;</span>
      <span class="nt">&lt;li&gt;</span>Vestibulum laoreet porttitor sem<span class="nt">&lt;/li&gt;</span>
      <span class="nt">&lt;li&gt;</span>Ac tristique libero volutpat at<span class="nt">&lt;/li&gt;</span>
    <span class="nt">&lt;/ul&gt;</span>
  <span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;</span>Faucibus porta lacus fringilla vel<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;</span>Aenean sit amet erat nunc<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;</span>Eget porttitor lorem<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span></code></pre></div>

<h3 id="inline">Inline</h3>

<p>Place all list items on a single line with <code>display: inline-block;</code> and some light padding.</p>

<div class="bd-example" data-example-id="">
<ul class="list-inline">
  <li>Lorem ipsum</li>
  <li>Phasellus iaculis</li>
  <li>Nulla volutpat</li>
</ul>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"list-inline"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;li&gt;</span>Lorem ipsum<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;</span>Phasellus iaculis<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;</span>Nulla volutpat<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span></code></pre></div>

<h3 id="horizontal-description">Horizontal description</h3>

<p>Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a <code>.text-truncate</code> class to truncate the text with an ellipsis.</p>

<div class="bd-example" data-example-id="">
<dl class="dl-horizontal">
  <dt class="col-sm-3">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

  <dt class="col-sm-3">Euismod</dt>
  <dd class="col-sm-9">Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
  <dd class="col-sm-9 col-sm-offset-3">Donec id elit non mi porta gravida at eget metus.</dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
</dl>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;dl</span> <span class="na">class=</span><span class="s">"dl-horizontal"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;dt</span> <span class="na">class=</span><span class="s">"col-sm-3"</span><span class="nt">&gt;</span>Description lists<span class="nt">&lt;/dt&gt;</span>
  <span class="nt">&lt;dd</span> <span class="na">class=</span><span class="s">"col-sm-9"</span><span class="nt">&gt;</span>A description list is perfect for defining terms.<span class="nt">&lt;/dd&gt;</span>

  <span class="nt">&lt;dt</span> <span class="na">class=</span><span class="s">"col-sm-3"</span><span class="nt">&gt;</span>Euismod<span class="nt">&lt;/dt&gt;</span>
  <span class="nt">&lt;dd</span> <span class="na">class=</span><span class="s">"col-sm-9"</span><span class="nt">&gt;</span>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.<span class="nt">&lt;/dd&gt;</span>
  <span class="nt">&lt;dd</span> <span class="na">class=</span><span class="s">"col-sm-9 col-sm-offset-3"</span><span class="nt">&gt;</span>Donec id elit non mi porta gravida at eget metus.<span class="nt">&lt;/dd&gt;</span>

  <span class="nt">&lt;dt</span> <span class="na">class=</span><span class="s">"col-sm-3"</span><span class="nt">&gt;</span>Malesuada porta<span class="nt">&lt;/dt&gt;</span>
  <span class="nt">&lt;dd</span> <span class="na">class=</span><span class="s">"col-sm-9"</span><span class="nt">&gt;</span>Etiam porta sem malesuada magna mollis euismod.<span class="nt">&lt;/dd&gt;</span>

  <span class="nt">&lt;dt</span> <span class="na">class=</span><span class="s">"col-sm-3 text-truncate"</span><span class="nt">&gt;</span>Truncated term is truncated<span class="nt">&lt;/dt&gt;</span>
  <span class="nt">&lt;dd</span> <span class="na">class=</span><span class="s">"col-sm-9"</span><span class="nt">&gt;</span>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.<span class="nt">&lt;/dd&gt;</span>
<span class="nt">&lt;/dl&gt;</span></code></pre></div>

<h2 id="responsive-typography">Responsive typography</h2>

<p><em>Responsive typography</em> refers to scaling text and components by simply adjusting the root element’s <code>font-size</code> within a series of media queries. Bootstrap doesn’t do this for you, but it’s fairly easy to add if you need it.</p>

<p>Here’s an example of it in practice. Choose whatever <code>font-size</code>s and media queries you wish.</p>

<div class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nt">html</span> <span class="p">{</span>
  <span class="nl">font-size</span><span class="p">:</span> <span class="m">14px</span><span class="p">;</span>
<span class="p">}</span>

<span class="k">@include</span> <span class="nd">media-breakpoint-up</span><span class="p">(</span><span class="n">sm</span><span class="p">)</span> <span class="p">{</span>
  <span class="nt">html</span> <span class="p">{</span>
    <span class="nl">font-size</span><span class="p">:</span> <span class="m">16px</span><span class="p">;</span>
  <span class="p">}</span>
<span class="p">}</span>

<span class="k">@include</span> <span class="nd">media-breakpoint-up</span><span class="p">(</span><span class="n">md</span><span class="p">)</span> <span class="p">{</span>
  <span class="nt">html</span> <span class="p">{</span>
    <span class="nl">font-size</span><span class="p">:</span> <span class="m">28px</span><span class="p">;</span>
  <span class="p">}</span>
<span class="p">}</span>

<span class="k">@include</span> <span class="nd">media-breakpoint-up</span><span class="p">(</span><span class="n">lg</span><span class="p">)</span> <span class="p">{</span>
  <span class="nt">html</span> <span class="p">{</span>
    <span class="nl">font-size</span><span class="p">:</span> <span class="m">20px</span><span class="p">;</span>
  <span class="p">}</span>
<span class="p">}</span></code></pre></div>


        </div>
      </div>
    </div>

    <footer class="bd-footer text-muted" role="contentinfo">
  <div class="container">
    <ul class="bd-footer-links">
      <li><a href="javascript:if(confirm(%27https://github.com/twbs/bootstrap  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27https://github.com/twbs/bootstrap%27" tppabs="https://github.com/twbs/bootstrap">GitHub</a></li>
      <li><a href="javascript:if(confirm(%27https://twitter.com/getbootstrap  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27https://twitter.com/getbootstrap%27" tppabs="https://twitter.com/getbootstrap">Twitter</a></li>
      <li><a href="javascript:if(confirm(%27http://v4.bootcss.com/content/getting-started/  \n\nThis file was not retrieved by Teleport Ultra, because the server reports that this file cannot be found.  \n\nDo you want to open it from the server?%27))window.location=%27http://v4.bootcss.com/content/getting-started/#examples%27" tppabs="http://v4.bootcss.com/content/getting-started/#examples">Examples</a></li>
      <li><a href="javascript:if(confirm(%27http://v4.bootcss.com/content/about/  \n\nThis file was not retrieved by Teleport Ultra, because the server reports that this file cannot be found.  \n\nDo you want to open it from the server?%27))window.location=%27http://v4.bootcss.com/content/about/%27" tppabs="http://v4.bootcss.com/content/about/">About</a></li>
    </ul>
    <p>Designed and built with all the love in the world by <a href="javascript:if(confirm(%27https://twitter.com/mdo  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27https://twitter.com/mdo%27" tppabs="https://twitter.com/mdo" target="_blank">@mdo</a> and <a href="javascript:if(confirm(%27https://twitter.com/fat  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27https://twitter.com/fat%27" tppabs="https://twitter.com/fat" target="_blank">@fat</a>. Maintained by the <a href="javascript:if(confirm(%27https://github.com/orgs/twbs/people  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27https://github.com/orgs/twbs/people%27" tppabs="https://github.com/orgs/twbs/people">core team</a> with the help of <a href="javascript:if(confirm(%27https://github.com/twbs/bootstrap/graphs/contributors  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27https://github.com/twbs/bootstrap/graphs/contributors%27" tppabs="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
    <p>Currently v4.0.0-alpha. Code licensed <a rel="license" href="javascript:if(confirm(%27https://github.com/twbs/bootstrap/blob/master/LICENSE  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27https://github.com/twbs/bootstrap/blob/master/LICENSE%27" tppabs="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, docs <a rel="license" href="javascript:if(confirm(%27https://creativecommons.org/licenses/by/3.0/  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27https://creativecommons.org/licenses/by/3.0/%27" tppabs="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p>
  </div>
</footer>

<script src="../../../cdn.bootcss.com/jquery/1.11.3/jquery.min.js" tppabs="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../assets/js/vendor/jquery.min.js"><\/script>')</script>


  <script src="../../dist/js/bootstrap.js" tppabs="http://v4.bootcss.com/dist/js/bootstrap.js"></script>



  
    <script src="../../assets/js/vendor/holder.min.js" tppabs="http://v4.bootcss.com/assets/js/vendor/holder.min.js"></script>
  
    <script src="../../assets/js/vendor/jekyll-search.js" tppabs="http://v4.bootcss.com/assets/js/vendor/jekyll-search.js"></script>
  
    <script src="../../assets/js/vendor/ZeroClipboard.min.js" tppabs="http://v4.bootcss.com/assets/js/vendor/ZeroClipboard.min.js"></script>
  
    <script src="../../assets/js/vendor/anchor.js" tppabs="http://v4.bootcss.com/assets/js/vendor/anchor.js"></script>
  
    <script src="../../assets/js/vendor/tether.min.js" tppabs="http://v4.bootcss.com/assets/js/vendor/tether.min.js"></script>
  
    <script src="../../assets/js/src/application.js" tppabs="http://v4.bootcss.com/assets/js/src/application.js"></script>
  


<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js" tppabs="http://v4.bootcss.com/assets/js/ie10-viewport-bug-workaround.js"></script>

<script>
SimpleJekyllSearch.init({
  searchInput: document.getElementById('search-input'),
  resultsContainer: document.getElementById('search-results'),
  searchResultTemplate: '<a class="dropdown-item" href="{url}">{title}</a>',
  noResultsText: '<div class="dropdown-item no-results">Sorry, there are no results for that search.</div>',
  dataSource: '../../search.json.js'/*tpa=http://v4.bootcss.com/search.json*/
})

Holder.addTheme('gray', {
  background: '#777',
  foreground: 'rgba(255,255,255,.75)',
  font: 'Helvetica',
  fontweight: 'normal'
})
</script>

  </body>
</html>
